<template>
  <div class="container">
    <div class="header">
      <div class="top-logo ">
        <div class="sking-admin-logo">{{ $t("message.title") }}</div>
        <div class="system">SYSTEM</div>
      </div>
      <!-- todo 如何使左侧菜单栏和右侧内容高度保持一致？-->
      <div style="background-color: #545c64;padding-bottom: 10px">
        <el-autocomplete
          v-model="queryParams.name"
          prefix-icon="el-icon-search"
          :fetch-suggestions="searchMenu"
          placeholder="搜索菜单"
          value-key="name"
          @select="handleSearchSelect"
          style="width: 90%;left:5%">
        </el-autocomplete>
      </div>
    </div>
    <div class="body">
      <el-menu
        v-show="showMenu"
        :collapse="false"
        ref="elMenu"
        :default-active="activeIndex"
        class="left-menu"
        background-color="#545c64"
        text-color="#fff"
        @select="handleSelect"
        active-text-color="#ffd04b">
        <!--左侧菜单组件-->
        <NavMenu :navMenus="menus"></NavMenu>
      </el-menu>
    </div>
  </div>
</template>

<script>
import {mapState, mapActions} from 'vuex'
import NavMenu from './NavMenu'
import {getMenus, getMenuTree} from '../utils/element-helper'
import util from '../utils/util'

export default {
  name: "Left",
  props: {},
  components: {
    NavMenu,
  },
  data() {
    return {
      queryParams: {},
      activeIndex: "/dashboard",
      timeout: null,
      menuArray: [],
      clientWidth: '',
      showMenu: true,
    };
  },
  async created() {
    this.$emit('toggleMainLoading')
    //从后台获取用户有权限的菜单
    let menus = await getMenuTree()
    this.setMenus(menus)
    this.menuArray = util.treeToArray(menus)
    this.clientWidth = `${document.documentElement.clientWidth}px`;
    this.showMenu = this.clientWidth.substr(0, this.clientWidth.length - 2) >= 975
    this.$nextTick(() => {
      this.$emit('toggleMainLoading')
    })
  },
  computed: {
    ...mapState("menu", [
      "menus"
    ])
  },
  //TODO 左侧导航栏resize后宽度会变化，需要单独设置宽度
  // mounted() {
  //   // 动态设置背景图的高度为浏览器可视区域高度
  //   // 首先在Virtual DOM渲染数据时，设置下背景图的高度．
  //   this.clientWidth = `${document.documentElement.clientWidth}px`;
  //   // 然后监听window的resize事件．在浏览器窗口变化时再设置下背景图高度．
  //   let that = this
  //   window.onresize = () => {
  //     that.clientWidth = `${document.documentElement.clientWidth}px`;
  //     that.showMenu = that.clientWidth.substr(0, that.clientWidth.length - 2) >= 975
  //   };
  // },
  methods: {
    searchMenu(queryString, cb) {
      let menu = queryString ? this.menuArray.filter(this.createNameFilter(queryString)) : this.menuArray;
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(menu);
      }, 1000 * Math.random());
    },
    createNameFilter(queryString) {
      return (state) => {
        return (state.name.indexOf(queryString) === 0)
      }
    },
    handleSearchSelect(item) {
      if (item.children && item.children.length > 0) {
        this.$refs.elMenu.open('/' + item.code)
      } else {
        this.handleSelect('/' + item.code, '/' + item.code)
      }
    },
    handleSelect(key, keyPath) {
      this.$router.push({path: key})
      this.activeIndex = key
    },
    ...mapActions("menu", [
      "setMenus"
    ]),
  }
};
</script>

<style scoped>

.top-logo {
  text-align: center;
  background-color: #545c64;
  padding: 5px 0 10px 0;
}

div.sking-admin-logo {
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 34px;
}

.left-menu {
  border: 0px;
  height: 100%;
}

.system {
  font-size: 12px;
  color: #909399;
  text-align: left;
  margin: 5px 0 0px 25px;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.body {
  flex: 1 1 auto;
}
.header, .footer {
  height: 18%;
  flex: 0 0 auto;
}
</style>
